<template>
  <view class="content_balance">
    <image class="content_balance_close" @click="closePopup" src="/static/tabs/close.png" mode="scaleToFit" />
    <view class="content_balance_person">
      <view class="content_balance_person_left" v-if="userStore.userInfo?.logoImg">
        <image :src="userStore.userInfo?.logoImg" mode="scaleToFit" />
        <text>{{ userStore.userInfo?.nickName
        }}</text>
      </view>
      <view class="content_balance_person_right">
        <image src="/static/tabs/fangdou.png" mode="scaleToFit" />
        <text>猫豆 {{ userPunti }}</text>
      </view>
    </view>
    <view class="content_balance_amount">
      <view class="content_balance_amount_items" @click="handleChange(item)" :class="activeId == item.id ? 'active' : ''"
        v-for="(item, index) in rechargeList" :key="index">
        <view class="content_balance_amount_items_legumesnum">
          <image src="/static/tabs/fangdou.png" mode="scaleToFit" />
          <text>{{ item.punti }}</text>
        </view>
        <view class="content_balance_amount_items_moneysnum">¥{{ item.actualAmount }}</view>
      </view>
    </view>
    <view @click="getpaly" class="content_balance_amountbtn">
      ¥{{ activeAmount }}&nbsp;立即充值
    </view>
    <view @click="getvipprotocol" class="content_balance_agreement">充值即同意《大创猫豆充值协议》</view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineProps } from 'vue'
import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app"
import { GetSumPunti, GetAppletProdtceList, WxPay, GetOrderStatus } from "../../api/user";
import { useUserStore } from '@/stores'
const emit = defineEmits(['closePopup'])
const props = defineProps({})
const userStore = useUserStore()
const activeId = ref(1)
const activeAmount = ref()
const punti = ref(4)
const userPunti = ref()
const rechargeList = ref<any>([])
onLoad(() => {
  getGetSumPunti()
  getList()
})
const getList = async () => {
  let res: any = await GetAppletProdtceList()
  if (res.code == 0) {
    rechargeList.value = res.data
    activeAmount.value = res.data[0].actualAmount
  }
}
onShow(() => {
  // console.log('执行onShow')
})
const handleChange = (item: any) => {
  activeId.value = item.id
  activeAmount.value = item.actualAmount
}
const closePopup = () => {
  emit('closePopup')
}
//获取做图消耗点数
const getGetSumPunti = async () => {
  let res: any = await GetSumPunti({
    typeID: 1,
    num: 1
  })
  if (res.code == 0) {
    punti.value = res.data.punti
    userPunti.value = res.data.userPunti
  } else {

  }
}
const getpaly = async () => {
  let res: any = await WxPay({ productId: activeId.value })
  if (res.code == 0) {
    uni.requestPayment({
      provider: 'wxpay',
      orderInfo: {}, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
      timeStamp: res.data.timeStamp,
      nonceStr: res.data.nonceStr,
      package: res.data.package,
      signType: res.data.signType,
      paySign: res.data.signature,
      success: async function (paly) {
        let a: any = await GetOrderStatus({ orderno: res.data.orderNo })
        if (a.code == 0) {
          uni.showToast({
            title: '支付成功',
            duration: 2000,
          })
        } else {

        }
      },
      fail: function (err) {
        console.log('fail:' + JSON.stringify(err));
      }
    });
  }
}
const getvipprotocol = () => {
  uni.navigateTo({
    url: '/pages/vipprotocol/index'
  })
}
</script>

<style lang="scss">
page {
  background: #F7F7F7;
}

.content_balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-image: url('https://statics.aidachuang.com/DaChuang/img2024-09-05/1725517579744.jpg');
  background-size: 100% 100%;
  margin-bottom: -68rpx;

  &_close {
    position: absolute;
    width: 29rpx;
    height: 29rpx;
    top: 24rpx;
    right: 32rpx;
  }

  &_person {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 46rpx;

    &_left {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 60rpx;

      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 12rpx;
      }

      text {
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
      }
    }

    &_right {
      display: flex;
      align-items: center;
      justify-content: center;
      // width: 188rpx;
      height: 72rpx;
      background: rgba(86, 63, 48, 0.1);
      border-radius: 36rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #563F30;
      margin-right: 76rpx;
      padding: 0 28rpx;

      image {
        width: 32rpx;
        height: 28rpx;
        margin-right: 12rpx;
      }
    }
  }

  &_amount {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 64rpx);
    margin-top: 30rpx;

    &_items {
      width: 204rpx;
      height: 212rpx;
      background: #F7F7F7;
      border-radius: 24rpx;
      margin-right: 30rpx;
      margin-bottom: 36rpx;
      border-radius: 24rpx;
      border: 2rpx solid #fff;

      &_legumesnum {
        width: 100%;
        height: 160rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F7F7F7;
        border-top-right-radius: 24rpx;
        border-top-left-radius: 24rpx;

        image {
          width: 32rpx;
          height: 28rpx;
          margin-right: 10rpx;
        }

        text {
          font-weight: 500;
          font-size: 36rpx;
          color: #563F30;
        }
      }

      &_moneysnum {
        width: 100%;
        height: 56rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 28rpx;
        color: #563F30;
        background-color: #EAEAEA;
        border-bottom-right-radius: 24rpx;
        border-bottom-left-radius: 24rpx;
      }
    }

    .active {
      width: 204rpx;
      height: 212rpx;
      border: 2rpx solid #F7D3B9;

      .content_balance_amount_items_legumesnum {
        background-color: #FFF8EE;
      }

      .content_balance_amount_items_moneysnum {
        background-color: #F7D3B9;
      }
    }

    &_items:nth-child(3n) {
      margin-right: 0 !important;
    }
  }

  &_amountbtn {
    width: calc(100% - 252rpx);
    height: 92rpx;
    background: #563F30;
    border-radius: 46rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #FFE1CD;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 32rpx;
    margin-bottom: 14rpx;
  }

  &_agreement {
    text-align: center;
    font-weight: 400;
    font-size: 24rpx;
    color: #B5B5B5;
    margin-bottom: 82rpx;
  }
}
</style>
